<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>
        天气案例
    </title>

    <script type="text/javascript" src="../js/vue.js">

    </script>
</head>

<body>

    <div id="root">
        <h1> 今天天气很{{info}}？ </h1>
        <button @click="isHot=!isHot"> 切换天气</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el: '#root',
            data() {
                return {
                    // name:this.isHot ?  "热":"冷",
                    isHot: true,
                    // info:"hh"
                    content:"勿复制"
                }
            },
            methods: {
                // change() {
                //     this.isHot = !this.isHot
                // }
            },
            computed: {
                info() {
                    return this.isHot ? "热啊" : this.content
                }
            },
            mounted() {
                axios
                    .get('https://api.coindesk.com/v1/bpi/currentprice.json')
                    .then(response => (this.content = response))
            }
        })
    </script>
</body>

</html>